<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
</head>
<body>
<!--
    1/计算属性
        在computed属性中定义计算属性的方法，在页面中使用{{方法名}}/或绑定model的方式来显示计算的结果
    2/监视属性
        通过vm对象的$watch()或watch配置来监视指定的属性，当属性变化时，回调函数自动调用，在函数内部进行运算
    3/计算属性高级
        通过getter/setter实现对属性数据的显示和监视，
        计算属性存在缓存。多次读取只执行一次getter计算
        getter: 给属性获取值
        setter: 使用属性值
-->
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"> <br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"> <br>
    姓名1:(单向) <input type="text" placeholder="Full Name1" v-model="fullName1"> <br>
    姓名2:(单向) <input type="text" placeholder="Full Name2" v-model="fullName2"> <br>
    姓名3:(双向) <input type="text" placeholder="Full Name3" v-model="fullName3"> <br>
<!--    在这里实现双向改变-->

    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
<!--    调用三次方法，但是从控制台可以看到，回调函数只执行了一次。原因是缓存-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#demo',
        data:{
            firstName:'A',
            lastName:'B',
            // fullName1:'A B',
            fullName2:'A B',
        },
        computed:{
            fullName1(){ /*计算属性的一个方法，方法的返回值作为属性值*/
                console.log("fullName1()")
                return this.firstName + ' ' + this.lastName;
            },

            /*实现fullName3的双向绑定*/
            fullName3:{ /*注意！！！：get和set是针对当前对象的get和set，get代表当前给对象获取值，set代表获取当前对象值*/
                /*回调函数*/
                get(){
                    /*计算并返回当前属性的值，自动监听，有改变则更新*/
                    return this.firstName + ' ' + this.lastName;
                },
                /*回调函数，当属性值发生改变时回调 ，更新县官的属性数据*/
                set(value){ /*value就是fullName3的最新属性值*/
                    const names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];

                }
            }
        },

        watch:{ /*配置监视*/
            // firstName:function (newValue,oldValue) {
            firstName:function (value) { //firstName发生了变化
                console.log(this);// 打印vm 对象
                this.fullName2 = value + ' ' + this.lastName;
            }
        }
    });

    vm.$watch('lastName',function (value) {
        console.log(this);
        /*更新fullName2*/
        this.fullName2 = this.firstName + ' ' + value;
    })
</script>
</body>
</html>